<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div id="app"></div>

    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>
    <script src="../js/prop-types.js"></script>


    <script type="text/babel">
       // 01 context 避开组件之间传值（props）
       // 发布订阅： 提供者 Provider / 消费者Consumer  

       //02 配置主题 

       const themes = {
           light:{
               color:'#9e9e9e',
               background:'#eeeeee'
           },
           dark:{
               color:'#e0e0e0',
               background:'#222222'
           },
       }

       //03 创建： Provider,Consumer 默认值
       const {Provider,Consumer}  = React.createContext({theme:themes.dark})

       //01 Provider,Consumer 组件
       //02 Provider 通过value 提供之值；Consumer 获取值 {()=>{}}
       //03 Consumer 订阅 Provider 提供的value 变化而变化
       //04 默认值 : Provider 里面 和 外面 区别

        class App extends React.Component{

            constructor(){
                super()
                this.state = {theme:themes.dark}
            }

            render(){
                const {theme} = this.state
                return (
                    <div>
                        <h1 style={{...this.state.theme}}>App Component</h1>
                        <Provider value={this.state.theme}>
                             <A1 />
                             <A2 />
                        </ Provider>
                    </div>
                    
                )
            }
        }

        function A1(){
           
            return (
                <Consumer>
                        {
                            (theme)=>{
                                // console.log(theme);
                                return (
                                    <div>
                                        <h1 style={{...theme}}>A1 Component</h1>
                                        <B1 />
                                        <B2 />
                                    </div>
                                )
                               
                            }
                        }
                </Consumer>
            )
        }



        function A2(props){
            // A context consumer was rendered with multiple children, or a child that isn't a function. A context consumer expects a single child that is a function.
            return (
                <div>
                    <Consumer>
                            {
                                (theme)=>{
                                   return  <h1 style={{...theme}}>A2 Component</h1>
                                }
                            }
                            
                    </Consumer>
                </div>
            )
        }

        function B1(props){
            return (
                <Consumer>
                    {
                        (theme)=>{
                            return (
                                <div>
                                    <h1 style={{...theme}}>B1 Component</h1>
                                </div>
                            )
                        }
                    }
                </Consumer>
            )
        }
        function B2(){
            return (
                <Consumer>
                    {
                        (theme)=>{
                            return (
                                <div>
                                    <h1 style={{...theme}}>B2 Component</h1>
                                </div>
                            )
                        }
                    }
                </Consumer>
            )
        }
      

        ReactDOM.render(<App />, document.getElementById('app'))
    </script>
</body>

</html>